var commonUtil = require("./common.js");
var Alert = require("./alert.js");
var privacyModal = require("./privacy.js");
require("./../style/modal.scss");
/**
 * 判断是否是PC端
 * @method IsPc
 */
function IsPC() {
  var userAgentInfo = navigator.userAgent;
  var Agents = new Array(
    "Android",
    "iPhone",
    "SymbianOS",
    "Windows Phone",
    "iPad",
    "iPod"
  );
  var flag = true;
  for (var v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false;
      break;
    }
  }
  return flag;
}

//显示弹窗
var showModal = function (resolve, reject, data) {
  var isReadPrivacy = false;
  var smsToken = "";
  var getSmsInfoTimer = null;
  var domObjArray = [];
  var defaultThemeColor = "#1272FF";
  var div = document.createElement("div");
  function close() {
    if (typeof ReactDom === "object") {
      ReactDom.unmountComponentAtNode(div);
    }
    if (div && div.parentNode) {
      div.parentNode.removeChild(div);
    }
    handleFunction("unbind");
  }
  function bindFunction(dom, eventType = "click", handleEvent) {
    dom.addEventListener(eventType, handleEvent, false);
  }

  function unbindFunction(dom, eventType, handleEvent) {
    dom.removeEventListener(eventType, handleEvent);
  }

  function readPrivacy() {
    var circle = document.getElementsByClassName("customer-select-circle")[0];
    isReadPrivacy = !isReadPrivacy;
    if (isReadPrivacy) {
      this.classList.add("customer-icon-selected");
      circle.style.background = data.themeColor || defaultThemeColor;
    } else {
      this.className = "customer-select-circle";
      circle.style.background = "";
    }
  }

  function login() {
    var verifyCode = document.getElementsByClassName("input-verifyCode")[0]
      .value;
    var phoneNumber = document.getElementsByClassName("input-phoneNumber")[0]
      .value;
    var params = {
      smsCode: verifyCode,
      mobile: phoneNumber,
      isReadPrivacy: isReadPrivacy,
      userType: data.userType || 1,
      ...data,
    };
    commonUtil.getLogin(params).then(function (res) {
      if (res.success && res.data && res.data.token) {
        resolve(res);
        close();
        Alert("登陆成功");
      } else {
        Alert("登陆失败");
      }
    });
  }
  function getSmsCode() {
    var verify_getCode = document.getElementsByClassName(
      "customer-get-code"
    )[0];
    var customer_get_code = document.getElementsByClassName(
      "customer-get-code"
    )[0];
    var disabled = verify_getCode.getAttribute("disabled");
    if (disabled === "true") {
      return;
    }
    var phoneNumber = document.getElementsByClassName("input-phoneNumber")[0]
      .value;
    //需要partnerid
    var params = {
      mobile: phoneNumber,
      partnerId: data.merchantId,
      type: 1,
    };
    var totalIndex = 60;
    commonUtil.getSmsCode(params).then(function (res) {
      if (res.success) {
        smsToken = res.data;
        getSmsInfoTimer && clearInterval(getSmsInfoTimer);
        getSmsInfoTimer = setInterval(function () {
          totalIndex = totalIndex - 1;
          var textContent = totalIndex + "秒后重试";
          verify_getCode.innerText = textContent;
          verify_getCode.classList.add("customer-sendSms");
          verify_getCode.setAttribute("disabled", true);
          if (totalIndex <= 0) {
            clearInterval(getSmsInfoTimer);
            verify_getCode.innerText = "获取验证码";
            verify_getCode.className = "customer-get-code";
            verify_getCode.setAttribute("disabled", false);
            customer_get_code.style.background =
              data.themeColor || defaultThemeColor;
          }
        }, 1000);
      }
    });
  }

  //去隐私政策
  function goToPrivacy() {
    if (IsPC()) {
      var site =
        "https://cps.qixin18.com/apps/cps/" +
        data.domain +
        "/product/privacy.html";
      window.open(site);
    } else {
      privacyModal();
    }
  }

  function initDomTheme() {
    var privacy_btn = document.getElementsByClassName(
      "customer-privacy-btn"
    )[0];
    var customer_login_btn = document.getElementsByClassName(
      "customer-login-btn"
    )[0];
    var customer_get_code = document.getElementsByClassName(
      "customer-get-code"
    )[0];
    privacy_btn.style.color = data.themeColor || defaultThemeColor;
    customer_get_code.style.background = data.themeColor || defaultThemeColor;
    customer_login_btn.style.background = data.themeColor || defaultThemeColor;
  }

  function initDom() {
    var privacy_btn = document.getElementsByClassName(
      "customer-privacy-btn"
    )[0];
    var circle = document.getElementsByClassName("customer-select-circle")[0];
    var customer_login_btn = document.getElementsByClassName(
      "customer-login-btn"
    )[0];
    var customer_get_code = document.getElementsByClassName(
      "customer-get-code"
    )[0];
    var customer_close_icon = document.getElementsByClassName(
      "customer-close-inner"
    )[0];
    domObjArray = [
      {
        dom: privacy_btn,
        event: goToPrivacy,
      },
      {
        dom: circle,
        event: readPrivacy,
      },
      {
        dom: customer_login_btn,
        event: login,
      },
      {
        dom: customer_get_code,
        event: getSmsCode,
      },
      {
        dom: customer_close_icon,
        event: close,
      },
    ];
  }
  function handleFunction(type) {
    domObjArray.forEach((item) => {
      if (type === "bind") {
        bindFunction(item.dom, "click", item.event);
      } else {
        unbindFunction(item.dom, "click", item.event);
      }
    });
  }

  var idStr = IsPC() ? "pc" : "mobile";
  var template =
    '<div id="customer-container-' +
    idStr +
    '">\n' +
    '        <div class="customer-close-icon">\n' +
    '           <div class="customer-close-inner">\n' +
    "           </div>\n" +
    "        </div>\n" +
    '        <div class="head">\n' +
    '            <p class="head-text1">身份验证</p>\n' +
    '            <p class="head-text2">为了您的信息安全，请验证手机号进行登录</p>\n' +
    "        </div>\n" +
    '        <div class="input-area">\n' +
    '            <div class="number">\n' +
    "                <span>手机号</span>\n" +
    '                <input placeholder="请输入手机号码" class="input-phoneNumber" type="text" />\n' +
    "            </div>\n" +
    '            <div class="verifyCode">\n' +
    '                <span class="text1">验证码</span>\n' +
    '                <input placeholder="请输入短信验证码"  class="input-verifyCode" type="text" />\n' +
    '                <span class="customer-get-code">获取验证码</span>\n' +
    '                <span class="customer-code-time">59秒后重试</span>\n' +
    "            </div>\n" +
    '            <div class="privacy">\n' +
    '                <span class="customer-select-circle"><i></i></span>\n' +
    '                <span class="privacy-agree">我已阅读并同意《<span class="customer-privacy-btn">隐私政策</span>》所有内容</span>\n' +
    "            </div>\n" +
    "        </div>\n" +
    '        <div class="customer-button">\n' +
    '            <button class="customer-login-btn">立即登录</button>\n' +
    "        </div>\n" +
    "    </div>";

  div.innerHTML = template;
  if (document.querySelector(".customer-modal-001")) {
    
  } else {
    document.body.appendChild(div);
    //如果不是pc端
    if (IsPC()) {
      require("./../style/pc.scss");
    } else {
      require("./../style/mobile.scss");
    }

    initDom();
    initDomTheme();

    handleFunction("bind");

    div.classList.add("customer-modal-001");
  }
};

module.exports = showModal;
